<template>
  <div class="app-container">
    <loading v-show="loading"/>
    <tableSearch
      :title-name= "titleName"
      :search-condition="searchCondition"
      @search="search"
      @add ="add"
      @delete="del"/>
    <table-list
      :table-data ="tableData"
      :title-name= "titleName"
      :table-list="tableList"
      :operatingo-state="operatingoState"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleSizeChange="handleSizeChange"
      @deleteArry="deleteArry"
      @handleCurrentChange="handleCurrentChange" />
    <!--新增角色-->
    <el-dialog :title="dialogTitle" :close-on-click-modal="true" :visible.sync="dialogFormVisible" width="70%">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属项目" prop="project">
              <el-select v-model="addForm.project" placeholder="请选择所属项目" style="width:100%;">
                <el-option value="1111"/>
                <el-option v-for="item in options" :label="item.project" :value="item.paramValue" :key="item.paramValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称" prop="taskName">
              <el-input v-model="addForm.taskName" placeholder="请输入任务名称" auto-complete="off"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="指派人" prop="assignor">
              <el-input v-model="addForm.assignor" placeholder="请输入指派人" auto-complete="off"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-refresh" @click="resetForm('addForm')">重置</el-button>
        <el-button icon="el-icon-circle-check-outline" type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Loading from '@/components/loading/loading'
import tableSearch from '@/components/tableSearch/index'
import tableList from '@/components/tableList/index'
// /import addFrom from '@/components/addFrom/index'
import { getTableList } from '@/api/task'
// import pagination from '@/components/pagination/index'
// import { getAllDepartment, getDepartmentList, addDepartment, deleteDepartment, changeDepartment } from '@/api/resource/department'
// import { transform } from '@/utils/trans'
// import { validNumber, validSpecial, validateRequire } from '@/utils/validate'
export default {
  components: {
    Loading,
    tableSearch,
    tableList
    // pagination
  },
  data() {
    // this.permissionHandle = this.$permissionHandle
    return {
      tableData: [],
      titleName: ['项目管理', '项目名称'],
      showAddForm: false,
      tableList: [
        { label: '项目名称', data: 'id' },
        { label: '结束日期', width: '180', data: 'project' },
        { label: '状态', width: '180', data: 'name' },
        { label: '总预计', width: '180', data: 'founder' },
        { label: '总消耗', width: '180', data: 'Assignor' },
        { label: '总剩余', width: '180', data: 'Finishers' },
        { label: '进度', width: '180', data: 'EstimatedTime' }
      ],
      searchCondition: [
        { label: '项目名称', field: 'ProjectName' }
      ],
      // 新增角色数据
      addForm: {
        project: '',
        taskName: '',
        assignor: ''
      },
      operatingoState: false, // 操作显示隐藏
      pageSize: 10,
      pageNo: 1,

      // popoverShows: false,
      dialogTitle: '',
      loading: false,
      deleteDepArry: [],
      options: [],
      dialogFormVisible: false, // 新增弹出框状态
      dialogFormVisibleState: false,
      // 列表所选数据集合
      multipleSelection: [],
      rules: {
        project: [
          { required: true, message: '请选择所属项目' }
          // { message: '请输入正确的机构编码', validator: validNumber },
          // { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],
        taskName: [
          { required: true, message: '请输入任务名称' }
          // { message: '数据不能包含特殊字符', validator: validateRequire },
          // { min: 1, max: 85, message: '长度在 1 到 85 个字符' }
        ],
        assignor: [
          { required: true, message: '请选择指派人', trigger: 'change' }
        ]
      }
      // 组织机构
      // orgData: []
    }
  },
  watch: {
    dialogFormVisible: function() {
      // debugger
      if (!this.dialogFormVisible && !this.dialogFormVisibleState) {
        this.resetForm('addForm')
      }
    }
  },
  mounted() {
    // this.getAll()
    // this.getList()
    // this.handleCurrentChange()
  },
  methods: {
    // 每页显示条数
    handleSizeChange(val) {
      this.pageSize = val
      console.log(val)
      this.handleCurrentChange()
    },
    // 查询方法
    search(val) {
      console.log(val)
    },
    // 删除方法
    del() {
      console.log(this.deleteDepArry)
      // console.log('del')
      if (this.deleteDepArry.length) {
        this.delTip()
      } else {
        this.open('请选择删除数据', 'warning')
      }
    },
    // 新增方法
    add() {
      console.log(111)
      this.dialogTitle = '新增'
      // this.resetForm('addForm')
      this.dialogFormVisible = true
      // this.dialogFormVisibleState = false
      this.$nextTick(() => {
        this.resetForm('addForm')
      })
    },
    // 编辑方法
    handleEdit(row) {
      console.log(row)
      this.dialogTitle = '修改'
      this.dialogFormVisible = true
      this.addForm = {
        project: row.project,
        taskName: row.name,
        assignor: row.Assignor
      }
    },
    // 行内删除
    handleDelete(row) {
      console.log(row)
      this.delTip()
    },
    // 删除提示方法
    delTip() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.open('删除成功', 'success')
      }).catch(() => {
        this.open('已取消删除', 'info')
      })
    },
    // 接收子组件传递过来需要删除的数据
    deleteArry(val) {
      // console.log(val)
      this.deleteDepArry = val
    },
    // 当前页// 获取数据
    handleCurrentChange(val) {
      this.loading = true
      this.pageNo = val || this.pageNo
      console.log(val + '====')
      getTableList({
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }).then(res => {
        this.loading = false
        // debugger
        if (res.code === 20000) {
          console.log(res.data.data)
          this.tableData = res.data.data
        } else {
          console.log(res.code)
        }
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    // 提示公用方法
    open(msg, type) {
      this.$message({
        message: msg,
        type: type
      })
    },
    // 新增提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.addForm)
          this.dialogFormVisible = false
          this.dialogFormVisibleState = true
        } else {
          this.loading = false
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      if (this.addForm.orgKey) {
        this.changeDep('edit')
      } else {
        this.addForm = {
          project: '',
          taskName: '',
          assignor: ''
        }
        this.$refs[formName].resetFields()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .tree-input{
    position: relative;
  }
  .input-tree{
      height:200px;width: 100%;
      .el-scrollbar__wrap{overflow: auto;}
    }
    .tree-select{width: 100%;}
</style>
